<template>
  <div class="c-fs34 c-wb-ba">
    <div>
      <div @click="showTip" class="c-ph24 c-flex-row c-pv30 c-fs26 c-br16 c-bg-sblack c-mt20 c-bg-sgray" v-for="(item,index) in fbAnswer" :key="index">
        <div class="c-mr20 c-mt4">{{index + 1}}</div>
        <iptBlanks :fillVal="userAnswer ? userAnswer[index].value : ''" :isDisabled="isRewoker==1 ? true : false" @changeVal="changeVal" :index="index"></iptBlanks>
      </div>
    </div>
  </div>
</template>
<script>
import iptBlanks from "@/components/templates/schoolAssignment/iptBlanks.vue";
export default {
  name: "fillBlanks",
  components: {
    iptBlanks
  },
  props: {
    questionInfo: {
      type: Object,
      default: null
    },
    bigNumber: {
      type: Number,
      default: 0
    },
    mId: {
      type: Number,
      default: 0
    },
    isRewoker: {
      type: Number,
      default: 0
    },
    userAnswer: {
      type: Array,
      default: []
    },
  },
  data() {
    return {
      optionClass: [],
      optionsList:[],
      fbAnswer:[],
      fillVal:''
    };
  },
  watch: {
  },
  mounted() {
    this.optionClass = ['noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose'];
    this.showOption()
  },
  methods: {
    showTip() {
      if (this.isRewoker == 1) {
        this.$showCjToast({
          text:"客观题不支持重新提交",
          type: "warn",
          time: 1500
        });
      }
    },
    changeVal(index, val) {
      this.fbAnswer[index].value = val
      this.$emit('pushAnswer', this.mId, this.fbAnswer, this.questionInfo.type)
    },
    showMoreQue() {
      this.moreQue = !this.moreQue
    },
    showOption() {
      let $this = this
      if ($this.questionInfo.type == 5) { //填空题
        $this.clickShow = true
        let _obj = JSON.stringify($this.questionInfo.answer); //深拷贝出来处理，不影响原数据
        $this.fbAnswer = JSON.parse(_obj);
        $this.fbAnswer.forEach(item => {
          item.value = "";
        })
      }
    },
  },
  destroyed() {
  }
};
</script>

<style scoped>
.imgInlineb  /deep/ img{display: inline-block;vertical-align: middle;}
.problemdDom /deep/ img{
  display: inline-block;
  vertical-align: middle;
}
.problemdDom /deep/ p{
  text-align: left!important;
}
.problemdDom /deep/ p img{
  display: block;
}
.problemdDom /deep/ .wscnph{
  display: block;
}
</style>
